<template>
  <div class="jobSearchListContainer">
    <div class="jobSearchList">
      <div class="jobSearchListTitle">
        <div class="jobSearchListTitleContent">
          <div class="titleFlag" />
          {{title}}招考岗位
        </div>
        <div class="searchInputContainer">
          <div class="searchInputInner">
            <el-input v-model.trim="matchZpName" placeholder="输入岗位关键词" size="small" class="searchInput"
              @keyup.enter.native="inputSearch" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            <el-button type="primary" size="small" @click="inputSearch">搜 索</el-button>
          </div>
        </div>
      </div>
      <div :class="{ JobSearchListInner: true, canScroll: canScroll }" @scroll="handleListScroll"
        ref="JobSearchListInner" v-loading="loading">
        <!-- <div class="dataOverview">
          <div class="yearBox">
            <span class="year">{{ year || '-' }}年</span>
            <span>{{ regionName }}{{title}}</span>
          </div>
          <div class="dataBox">
            <div class="dataItem" v-for="item in dataOverviewList" :key="item.name">
              <div class="beforeIcon">
                <img :src="item.beforeIcon" class="beforeIconClass" />
              </div>
              <div class="dataItemContent">
                <span class="dataItemName">{{ item.name }}</span>
                <span class="dataItemValue">{{ item.value }}</span>
              </div>
              <img :src="item.afterIcon" class="afterIconClass" />
            </div>
          </div>
        </div> -->
        <div class="jobSearchItemContainer" v-if="jobList.length > 0">
          <div :class="{'JobSearchItem':true,'selected':jobItem.id==selectId}" @click="toJobDetail(jobItem)"
            v-for="jobItem in jobList" :key="jobItem.id">
            <div class="jobSearchItemName">
              {{jobItem.noticeTitle}}
            </div>
            <div class="jobSearchItemTime">
              发布于 {{jobItem.publishTime}}
            </div>
          </div>
        </div>
        <Empty description="暂无相关岗位" v-else></Empty>
        <template v-if="jobList.length">
          <div class="isLoading" v-if="isEnd">没有更多内容了~</div>
          <div class="isLoading" v-else>正在加载中~</div>
        </template>

      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from "element-ui";
import { throttle } from "lodash";
import { getCivilTeacherList, getCivilTeacherNum } from "@/api/civil-job";
export default {
  name: "civilTeacherSearchList",
  components: {
    Empty,
  },
  props: {
    selectedCivilJobClass: {
      type: Object,
      default: () => {},
    },
    yearList: {
      type: "",
      default: "",
    },
  },
  computed: {
    canScroll() {
      return this.$store.state.settings.canScroll;
    },
  },
  data() {
    return {
      isEnd: true,
      selectId: "",
      loading: false,
      matchZpName: "",
      regionName: "",
      year: "",
      jobList: [],
      loading: false,
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
      dataOverviewList: [
        {
          name: "正在招考的单位",
          value: 0,
          beforeIcon:
            "https://img3.job1001.com/data_center/images/beforeIcon1.png",
          afterIcon:
            "https://img3.job1001.com/data_center/images/afterIcon1.png",
        },
        {
          name: "未开始招考的单位",
          value: 0,
          beforeIcon:
            "https://img3.job1001.com/data_center/images/beforeIcon2.png",
          afterIcon:
            "https://img3.job1001.com/data_center/images/afterIcon2.png",
        },
      ],
      title: "教师招聘",
    };
  },
  watch: {
    selectedCivilJobClass: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        if (!newValue.year.length) {
          // this.$message.error("请选择年份");
          return;
        }
        this.title = this.getTitleByCivilType(newValue["civilType"][0]);
        this.year = newValue.year[0];
        this.pageParams.pageNo = 1;
        this.regionId =
          newValue.regionId.length > 0
            ? newValue.regionId[0].split("-")[0]
            : "100000";
        this.regionName =
          newValue.regionId.length > 0
            ? newValue.regionId[0].split("-")[1]
            : "全国";

        this.getCivilTeacherListFn();
        // this.getCivilTeacherNumFn();
      },
    },
    yearList: {
      handler(newValue, oldValue) {},
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    // 使用 lodash 的 throttle 函数来防抖
    this.handleListScroll = throttle(this.handleListScroll, 1000);
  },
  methods: {
    getTitleByCivilType(type) {
      switch (type) {
        case 1:
          return "国家公务员考试";
        case 2:
          return "教师招聘";
        case 3:
          return "特岗教师招聘";
        case 4:
          return "事业单位招聘";
        default:
          return "招聘";
      }
    },
    async getCivilTeacherNumFn() {
      const params = {
        noticeType: this.selectedCivilJobClass.civilType.join(","),
        regionId: this.regionId,
        year: this.selectedCivilJobClass.year[0],
      };
      if (params.regionId == 100000) {
        delete params.regionId;
      }
      if (
        this.selectedCivilJobClass.date &&
        this.selectedCivilJobClass.date.length
      ) {
        params.signupStartTime = this.selectedCivilJobClass.date[0];
        params.signupEndTime = this.selectedCivilJobClass.date[1];
      }
      const res = await getCivilTeacherNum(params);
      if (res.code == 200) {
        this.dataOverviewList[0].value = res.data.startSignupNum || "--";
        this.dataOverviewList[1].value = res.data.unstartedSignupNum || "--";
      }
    },
    getCivilTeacherListFn() {
      this.loading = true;
      const params = {
        noticeType: this.selectedCivilJobClass.civilType.join(","),
        regionId: this.regionId,
        year: this.selectedCivilJobClass.year[0],
        recruitmentStatus: this.selectedCivilJobClass.recruitmentStatus[0],
        matchTitle: this.matchZpName.replace(/\s+/g, ""),
        pageNo: this.pageParams.pageNo,
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
      };
      if (params.regionId == 100000) {
        delete params.regionId;
      }
      if (
        this.selectedCivilJobClass.date &&
        this.selectedCivilJobClass.date.length
      ) {
        params.signupStartTime = this.selectedCivilJobClass.date[0];
        params.signupEndTime = this.selectedCivilJobClass.date[1];
      }
      this.loading = true;
      getCivilTeacherList(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            res.data.forEach((element) => {
              if (element.publishTime) {
                element.publishTime = element.publishTime.slice(0, 10);
              } else {
                element.publishTime = "未知时间";
              }
            });
            if (this.pageParams.pageNo == 1) {
              this.jobList = res.data;
            } else {
              this.jobList = [...this.jobList, ...res.data];
            }
            if (this.jobList.length >= res.pageparam.sums) {
              this.isEnd = true;
            } else {
              this.isEnd = false;
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toJobDetail(item) {
      this.selectId = item.id;
      let routeData = this.$router.resolve({
        path: `/civil-teacher-detail?id=${item.id}&year=${this.selectedCivilJobClass.year[0]}`,
      });
      window.open(routeData.href, "_blank");
      switch (item.noticeType) {
        case 2:
          this.$bus.$emit("generalReportAction", {
            etId: 40047,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
            eventData: item.noticeTitle,
          });
          break;
        case 3:
          this.$bus.$emit("generalReportAction", {
            etId: 40048,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
            eventData: item.noticeTitle,
          });
          break;
        case 4:
          this.$bus.$emit("generalReportAction", {
            etId: 40049,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
            eventData: item.noticeTitle,
          });
          break;

        default:
          break;
      }
    },
    handleListScroll(e) {
      const container = this.$refs.JobSearchListInner;
      const scrollTop = container.scrollTop; // 滚动的距离
      const scrollHeight = container.scrollHeight; // 内容的总高度
      const clientHeight = container.clientHeight; // 容器的可见高度

      // 判断距离底部小于200px时触发加载
      if (scrollHeight - scrollTop - clientHeight < 400) {
        this.load();
      }
    },
    load() {
      this.pageParams.pageNo = parseInt(this.pageParams.pageNo) + 1;
      this.getCivilTeacherListFn();
    },
    inputSearch() {
      this.pageParams.pageNo = 1;
      this.getCivilTeacherListFn();
    },
  },
};
</script>

<style lang="scss" scoped>
.jobSearchListContainer {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 219px);
  margin: 0 12px 0 0;
  z-index: 2; //很重要
  min-width: 800px;
  .jobSearchList {
    width: 100%;
    background: #f1f4f9;
    border-radius: 18px;
    padding: 14px 8px 0 20px;
    .jobSearchListTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 600;
      .jobSearchListTitleContent {
        display: flex;
        align-items: center;
      }
      .searchInputContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        .searchInputInner {
          display: flex;
          width: 60%;
          margin: 0 177px 0 127px;
        }
        ::v-deep .el-button {
          height: 40px;
          width: 88px;
          margin-left: -7px;
          border-radius: 0 8px 8px 0;
          background: #4880ff;
          border: 1px solid #4880ff;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          font-style: normal;
        }
        ::v-deep .el-input {
          position: relative;
          height: 40px;
        }
        ::v-deep .el-input__inner {
          height: 40px;
          border-radius: 8px;
          border: 2px solid #4880ff;
          & + .el-input__prefix {
            .el-input__icon:after {
              margin-top: 5px;
            }
          }
          &::placeholder {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #b1b3c7;
            line-height: 20px;
          }
        }
      }
      .moreCategory {
        font-family: PingFangSC, PingFang SC;
        font-size: 14px;
        font-weight: 400;
        color: #4880ff;
        margin-left: auto;
        margin-right: 26px;
        cursor: pointer;
        .arrow {
          margin-left: 4px;
        }
      }
      .titleFlag {
        width: 4px;
        height: 17px;
        border-radius: 32px;
        background-color: #409eff;
        margin-right: 8px;
      }
    }
    .JobSearchListInner {
      width: 100%;
      height: calc(100vh - 239px); //重要
      overflow-y: hidden;
      padding-right: 14px;
      padding-top: 22px;
      &.canScroll {
        overflow-y: scroll;
        padding-right: 10px; // 滚动条的出现会占据宽度，所以要padding-right要配合滚动条的宽度动态变化
      }
      .dataOverview {
        display: flex;
        margin-bottom: 10px;
        .yearBox {
          min-width: 126px;
          height: 78px;
          padding: 0 14px;
          border-radius: 8px;
          background: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 16px;
          .year {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #d5413d;
            margin-bottom: 8px;
          }
        }
        .dataBox {
          flex: 1;
          margin-left: 10px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          .dataItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #eaedf7;
            .beforeIcon {
              border-radius: 8px;
              margin-right: 12px;
              .beforeIconClass {
                width: 40px;
                height: 40px;
              }
            }
            .dataItemContent {
              display: flex;
              flex-direction: column;
              .dataItemName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #a2a5b3;
                margin-bottom: 9px;
              }
              .dataItemValue {
                font-family: ddin-extraBold;
                font-weight: bold;
                font-size: 24px;
                color: #242f57;
              }
            }
            .afterIconClass {
              width: 40px;
              height: 40px;
              margin-left: auto;
            }
          }
        }
      }
      .chartBox {
        display: flex;
        margin-bottom: 10px;
        height: 294px;
        .item {
          flex: 1;
          padding: 10px;
          margin-right: 10px;
          border-radius: 8px;
          background-color: #fff;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .jobSearchItemContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        grid-auto-rows: 84px; /* 设置行高为88px */
        grid-gap: 10px;
        .JobSearchItem {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 22px 14px 15px;
          // height: 88px;
          background: #fff;
          border-radius: 8px;
          // border: 1px solid #f0f0f0;
          transition: 0.2s ease-out;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: all 0.2s;
          box-sizing: border-box;
          &:hover {
            border-color: #0b6eff;
            transition-delay: 0.2s;
            transform: translateY(-5%);

            box-shadow: 0px 5px 13px 0px #d6e2f4;
            border: 1px #0b6eff solid;
            padding: 21px 14px 14px;
            .jobSearchItemName {
              color: #0b6eff;
            }
          }
          &:before {
            content: "";
            position: absolute;
            width: 400px;
            height: 120%;
            background-color: rgba(11, 110, 255, 0.05);
            top: 50%;
            transform: skewX(30deg) translate(-130%, -50%);
            transition: all 0.4s;
          }
          &:hover::before {
            transform: skewX(30deg) translate(480%, -50%);
            transition-delay: 0.1s;
          }
          &.selected {
            box-shadow: 0px 5px 13px 0px #d6e2f4;
            border: 1px #0b6eff solid;
            .jobSearchItemName {
              color: #0b6eff;
            }
          }
          .jobSearchItemName {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #222222;
            line-height: 18px;
            text-align: left;
            font-style: normal;
            margin-bottom: 10px;
            max-width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .jobSearchItemTime {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 13px;
            color: #a2a5b3;
            line-height: 18px;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .isLoading {
        display: flex;
        justify-content: center;
        padding: 24px;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 4px;
  background-color: #f1f4f9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(207, 216, 230, 1);
  border-radius: 2px;
}
</style>
